7 files changed, 173 insertions, 0 deletions
diff --git a/src/app/(main)/admin/users/[userId]/UserEditForm.tsx b/src/app/(main)/admin/users/[userId]/UserEditForm.tsx
new file mode 100644
index 0000000..28bf030
--- /dev/null
+++ b/src/app/(main)/admin/users/[userId]/UserEditForm.tsx
@@ -0,0 +1,73 @@
+import {
+  Form,
+  FormButtons,
+  FormField,
+  FormSubmitButton,
+  ListItem,
+  PasswordField,
+  Select,
+  TextField,
+} from '@umami/react-zen';
+import { useLoginQuery, useMessages, useUpdateQuery, useUser } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
+
+export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () => void }) {
+  const { formatMessage, labels, messages, getMessage } = useMessages();
+  const user = useUser();
+  const { user: login } = useLoginQuery();
+
+  const { mutateAsync, error, toast, touch } = useUpdateQuery(`/users/${userId}`);
+
+  const handleSubmit = async (data: any) => {
+    await mutateAsync(data, {
+      onSuccess: async () => {
+        toast(formatMessage(messages.saved));
+        touch('users');
+        touch(`user:${user.id}`);
+        onSave?.();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={getMessage(error?.code)} values={user}>
+      <FormField name="username" label={formatMessage(labels.username)}>
+        <TextField data-test="input-username" />
+      </FormField>
+      <FormField
+        name="password"
+        label={formatMessage(labels.password)}
+        rules={{
+          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: '8' }) },
+        }}
+      >
+        <PasswordField autoComplete="new-password" data-test="input-password" />
+      </FormField>
+
+      {user.id !== login.id && (
+        <FormField
+          name="role"
+          label={formatMessage(labels.role)}
+          rules={{ required: formatMessage(labels.required) }}
+        >
+          <Select defaultValue={user.role}>
+            <ListItem id={ROLES.viewOnly} data-test="dropdown-item-viewOnly">
+              {formatMessage(labels.viewOnly)}
+            </ListItem>
+            <ListItem id={ROLES.user} data-test="dropdown-item-user">
+              {formatMessage(labels.user)}
+            </ListItem>
+            <ListItem id={ROLES.admin} data-test="dropdown-item-admin">
+              {formatMessage(labels.admin)}
+            </ListItem>
+          </Select>
+        </FormField>
+      )}
+      <FormButtons>
+        <FormSubmitButton data-test="button-submit" variant="primary">
+          {formatMessage(labels.save)}
+        </FormSubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
diff --git a/src/app/(main)/admin/users/[userId]/UserHeader.tsx b/src/app/(main)/admin/users/[userId]/UserHeader.tsx
new file mode 100644
index 0000000..1f82897
--- /dev/null
+++ b/src/app/(main)/admin/users/[userId]/UserHeader.tsx
@@ -0,0 +1,9 @@
+import { PageHeader } from '@/components/common/PageHeader';
+import { useUser } from '@/components/hooks';
+import { User } from '@/components/icons';
+
+export function UserHeader() {
+  const user = useUser();
+
+  return <PageHeader title={user?.username} icon={<User />} />;
+}
diff --git a/src/app/(main)/admin/users/[userId]/UserPage.tsx b/src/app/(main)/admin/users/[userId]/UserPage.tsx
new file mode 100644
index 0000000..5e0f8d1
--- /dev/null
+++ b/src/app/(main)/admin/users/[userId]/UserPage.tsx
@@ -0,0 +1,19 @@
+'use client';
+import { Column } from '@umami/react-zen';
+import { UserHeader } from '@/app/(main)/admin/users/[userId]/UserHeader';
+import { Panel } from '@/components/common/Panel';
+import { UserProvider } from './UserProvider';
+import { UserSettings } from './UserSettings';
+
+export function UserPage({ userId }: { userId: string }) {
+  return (
+    <UserProvider userId={userId}>
+      <Column gap="6">
+        <UserHeader />
+        <Panel>
+          <UserSettings userId={userId} />
+        </Panel>
+      </Column>
+    </UserProvider>
+  );
+}
diff --git a/src/app/(main)/admin/users/[userId]/UserProvider.tsx b/src/app/(main)/admin/users/[userId]/UserProvider.tsx
new file mode 100644
index 0000000..ea01915
--- /dev/null
+++ b/src/app/(main)/admin/users/[userId]/UserProvider.tsx
@@ -0,0 +1,20 @@
+import { Loading } from '@umami/react-zen';
+import { createContext, type ReactNode } from 'react';
+import { useUserQuery } from '@/components/hooks/queries/useUserQuery';
+import type { User } from '@/generated/prisma/client';
+
+export const UserContext = createContext<User>(null);
+
+export function UserProvider({ userId, children }: { userId: string; children: ReactNode }) {
+  const { data: user, isFetching, isLoading } = useUserQuery(userId);
+
+  if (isFetching && isLoading) {
+    return <Loading placement="absolute" />;
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
+}
diff --git a/src/app/(main)/admin/users/[userId]/UserSettings.tsx b/src/app/(main)/admin/users/[userId]/UserSettings.tsx
new file mode 100644
index 0000000..3f17f3e
--- /dev/null
+++ b/src/app/(main)/admin/users/[userId]/UserSettings.tsx
@@ -0,0 +1,25 @@
+import { Column, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks';
+import { UserEditForm } from './UserEditForm';
+import { UserWebsites } from './UserWebsites';
+
+export function UserSettings({ userId }: { userId: string }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <Column gap="6">
+      <Tabs>
+        <TabList>
+          <Tab id="details">{formatMessage(labels.details)}</Tab>
+          <Tab id="websites">{formatMessage(labels.websites)}</Tab>
+        </TabList>
+        <TabPanel id="details" style={{ width: 500 }}>
+          <UserEditForm userId={userId} />
+        </TabPanel>
+        <TabPanel id="websites">
+          <UserWebsites userId={userId} />
+        </TabPanel>
+      </Tabs>
+    </Column>
+  );
+}
diff --git a/src/app/(main)/admin/users/[userId]/UserWebsites.tsx b/src/app/(main)/admin/users/[userId]/UserWebsites.tsx
new file mode 100644
index 0000000..eeb173e
--- /dev/null
+++ b/src/app/(main)/admin/users/[userId]/UserWebsites.tsx
@@ -0,0 +1,15 @@
+import { WebsitesTable } from '@/app/(main)/websites/WebsitesTable';
+import { DataGrid } from '@/components/common/DataGrid';
+import { useUserWebsitesQuery } from '@/components/hooks';
+
+export function UserWebsites({ userId }) {
+  const queryResult = useUserWebsitesQuery({ userId });
+
+  return (
+    <DataGrid query={queryResult}>
+      {({ data }) => (
+        <WebsitesTable data={data} showActions={true} allowEdit={true} allowView={true} />
+      )}
+    </DataGrid>
+  );
+}
diff --git a/src/app/(main)/admin/users/[userId]/page.tsx b/src/app/(main)/admin/users/[userId]/page.tsx
new file mode 100644
index 0000000..16c9f36
--- /dev/null
+++ b/src/app/(main)/admin/users/[userId]/page.tsx
@@ -0,0 +1,12 @@
+import type { Metadata } from 'next';
+import { UserPage } from './UserPage';
+
+export default async function ({ params }: { params: Promise<{ userId: string }> }) {
+  const { userId } = await params;
+
+  return <UserPage userId={userId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'User',
+};